<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-bg{background: red}
        .green-bg{background: green}
    </style>
</head>
<body>
<!--    Vue的数据会展示到该Vue-->
    <div id = "app">
        <div>{{message}}</div>
        <div>姓名：{{person.name}},年龄：{{person.age}},性别：{{person.gender}}</div>
        <p v-if="person.age >= 18">已成年！</p>
        <p v-else>未成年！</p>
        <p v-show="person.gender==='女'">女</p>
        <p v-show="person.gender==='男'">男</p>
<!--        双向绑定-->
        <div>姓名：<input type="text" v-model="person.name"></div>
        <div>年龄：<input type="text" v-model="person.age"></div>
        <div>性别：<input type="text" v-model="person.gender"></div>

        <table border="1px" width="400px">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="per in persons" :class="per.gender=='男'?'red-bg':'green-bg'" @click="showPerson(per)">
                <td>{{per.name}}</td>
                <td>{{per.age}}</td>
                <td>{{per.gender}}</td>
            </tr>
        </table>
    </div>

<!--    导入vue的js文件-->
    <script src="js/vue.min.js"></script>
    <script>
        //创建Vue对象 ViewModel
        //el是表达式，定位数据暂时的位置
        //data是model，需要绑定的数据都定义在data里面
        new Vue({
            //Vue的数据会展示到该Vue
            el:"#app",
            data:{
                message:"Hello Vue!!!!",
                person:{name:"张三",age:"18",gender:"男"},
                width:"400px",
                persons:[
                    {name:"张三",age:"20",gender:"男"},
                    {name:"李四",age:"22",gender:"女"},
                    {name:"王五",age:"23",gender:"男"},
                    {name:"赵六",age:"18",gender:"女"}
                ]

            },
            methods:{
                //显示个人信息
                showPerson (per) {
                    alert('此人是：'+per.name+'，年龄：'+per.age+'，性别：'+per.gender)
                }
            },
            created(){
                console.alert("created")
            },
            mounted(){
                console.log("mounted")
            },
            updated(){
                console.log("updated")
            },
            unmounted(){
                console.log("unmounted")
            }
        });
    </script>

</body>
</html>





























